<template>
  <view class="merchant-apply">
    <view class="form-container">
      <!-- 店铺Logo上传 -->
      <view class="form-item">
        <view class="logo-upload" @tap="uploadLogo">
          <image v-if="formData.shopLogo" :src="formData.shopLogo" mode="aspectFill"></image>
          <view v-else class="upload-placeholder">
            <uni-icons type="camera-filled" size="40" color="#999"></uni-icons>
            <text>上传店铺Logo</text>
          </view>
        </view>
      </view>

      <!-- 基本信息表单 -->
      <view class="form-item">
        <text class="label required">店铺名称</text>
        <input 
          type="text"
          v-model="formData.shopName"
          placeholder="请输入店铺名称"
          class="input"
        />
      </view>

      <view class="form-item">
        <text class="label">店铺描述</text>
        <textarea
          v-model="formData.shopDescription"
          placeholder="请输入店铺描述"
          class="textarea"
          maxlength="200"
        ></textarea>
      </view>

      <view class="form-item">
        <text class="label required">营业执照号</text>
        <input 
          type="text"
          v-model="formData.businessLicense"
          placeholder="请输入营业执照号"
          class="input"
        />
      </view>

      <view class="form-item">
        <text class="label required">法人姓名</text>
        <input 
          type="text"
          v-model="formData.legalPerson"
          placeholder="请输入法人姓名"
          class="input"
        />
      </view>

      <view class="form-item">
        <text class="label required">联系电话</text>
        <input 
          type="number"
          v-model="formData.contactPhone"
          placeholder="请输入手机号"
          maxlength="11"
          class="input"
        />
      </view>

      <view class="form-item">
        <text class="label">联系邮箱</text>
        <input 
          type="text"
          v-model="formData.contactEmail"
          placeholder="请输入联系邮箱"
          class="input"
        />
      </view>

      <view class="form-item">
        <text class="label required">店铺地址</text>
        <textarea
          v-model="formData.address"
          placeholder="请输入店铺详细地址"
          class="textarea"
        ></textarea>
      </view>

      <!-- 提交按钮 -->
      <button class="submit-btn" @tap="handleSubmit">提交申请</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        shopName: '',
        shopLogo: '',
        shopDescription: '',
        businessLicense: '',
        legalPerson: '',
        contactPhone: '',
        contactEmail: '',
        address: ''
      }
    }
  },
  methods: {
    // 上传店铺Logo
    async uploadLogo() {
      try {
        const [error, res] = await uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera']
        });
        
        if (error) {
          throw new Error('选择图片失败');
        }

        const tempFilePath = res.tempFilePaths[0];
        
        // 显示上传中
        uni.showLoading({
          title: '上传中...',
          mask: true
        });

        // TODO: 替换为实际的上传接口
        const uploadRes = await this.$api.common.upload(tempFilePath);
        
        if (uploadRes.code === 200) {
          this.formData.shopLogo = uploadRes.data;
          uni.showToast({
            title: '上传成功',
            icon: 'success'
          });
        } else {
          throw new Error(uploadRes.message || '上传失败');
        }
      } catch (error) {
        uni.showToast({
          title: error.message || '上传失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 表单验证
    validate() {
      const rules = {
        shopName: '店铺名称不能为空',
        businessLicense: '营业执照号不能为空',
        legalPerson: '法人姓名不能为空',
        contactPhone: '联系电话不能为空',
        address: '店铺地址不能为空'
      };

      for (const [field, message] of Object.entries(rules)) {
        if (!this.formData[field]) {
          uni.showToast({
            title: message,
            icon: 'none'
          });
          return false;
        }
      }

      // 验证手机号格式
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(this.formData.contactPhone)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none'
        });
        return false;
      }

      // 验证邮箱格式（如果填写了的话）
      if (this.formData.contactEmail) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(this.formData.contactEmail)) {
          uni.showToast({
            title: '邮箱格式不正确',
            icon: 'none'
          });
          return false;
        }
      }

      return true;
    },

    // 提交申请
    async handleSubmit() {
      if (!this.validate()) return;

      try {
        uni.showLoading({
          title: '提交中...',
          mask: true
        });

        const res = await this.$api.user.merchant.apply(this.formData);

        if (res.code === 200) {
          uni.showToast({
            title: '申请提交成功',
            icon: 'success'
          });
          
          // 延迟返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          throw new Error(res.message || '提交失败');
        }
      } catch (error) {
        uni.showToast({
          title: error.message || '提交失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.merchant-apply {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.form-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
}

.form-item {
  margin-bottom: 30rpx;

  .label {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;

    &.required::before {
      content: '*';
      color: #ff5500;
      margin-right: 4rpx;
    }
  }

  .input {
    width: 100%;
    height: 80rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #333;
  }

  .textarea {
    width: 100%;
    height: 160rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #333;
  }
}

.logo-upload {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 30rpx;
  border: 2rpx dashed #ddd;

  image {
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
  }

  .upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999;

    text {
      font-size: 24rpx;
      margin-top: 16rpx;
    }
  }
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(to right, #ff7300, #ff5500);
  color: #fff;
  font-size: 32rpx;
  border-radius: 44rpx;
  margin-top: 60rpx;
  font-weight: bold;

  &:active {
    opacity: 0.9;
  }
}
</style> 